<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>canvas火柴人</title>
	</head>
	<body>
		<canvas id="myCanvas" width="200" height="310" style="border:1px solid #c3c3c3;">
		         
		</canvas>
		<script>
		  var c = document.getElementById("myCanvas");
		  var ctx = c.getContext("2d");
		  //头
		  ctx.beginPath();
		  ctx.arc(95, 50, 40, 0, 2 * Math.PI);
		  ctx.stroke();
		  //身体
		  ctx.moveTo(90,90);
		  ctx.lineTo(90, 200);
		  ctx.stroke();
		  //左脚
		  ctx.moveTo(50,290);
		  ctx.lineTo(90, 200);
		  ctx.stroke();
		  //右脚
		  ctx.moveTo(120,290);
		  ctx.lineTo(90, 200);
		  ctx.stroke();
		  //左手
		  ctx.moveTo(20,150);
		  ctx.lineTo(90, 120);
		  ctx.stroke();
		  //右手
		  ctx.moveTo(160,150);
		  ctx.lineTo(90, 120);
		  ctx.stroke();
		</script>
	</body>
</html>